<template>
	<uv-scroll-list>
		<view class="menu-container">
			<view class="menu-container-scroll">
				<view
					class="line"
					v-for="(item, index) in list.target_detail"
					:key="index"
				>
					<view
						class="item"
						v-for="(item1, index1) in item"
						:key="index1"
						:class="[(index1 === item.length - 1) && 'no-margin-right']"
					>
						<image
							class="image"
							:src="item1.image_url"
							mode=""
						></image>
						<text class="text">{{ item1.title }} </text>
					</view>
				</view>
			</view>
		</view>
	</uv-scroll-list>
	
</template>

<script>
  export default {
    name: 'Banner1',
    props: {
		menuBaseUrl:String,
      title: String,
      list: Array,
      colorData: String // yellow/blue/gray/green
    }
  }
</script>

<style >


.menu-container-scroll {
	display: flex;
	flex-direction:column;
	height: 360rpx;
}

.menu-container-scroll .line {
	display: flex;
	margin-top: 10px;
}

.menu-container-scroll .item {
	margin-right: 15px;
}
.menu-container-scroll .image {
	width: 61px;
	height: 48px;
}

.menu-container-scroll .text {
	margin-top: 5px;
	color: $uv-content-color;
	font-size: 12px;
	text-align: center;
}

.menu-container-scroll .no-margin-right {
	margin-right: 0;
}
	
</style>
